{template 'header'}
<style>
.unstartBox .unstartHeader{
    background-color: #fe7c6b;
    text-align: right;
}
.unstartBox .unstartHeader .notice{
    padding: 20px 15px;
}
.unstartBox .unstartHeader .notice>img{
    width: 38px;
    vertical-align: middle;
}
.unstartBox .unstartHeader .notice>span{
    vertical-align: middle;
    color: #fff;
    font-size: 14px;
    margin-left: 5px;
}
.unstartBox .unstartConten{
    background: #fff;
    border-radius: 10px;
    width: 90%;
    margin: -10px auto;
    padding: 15px 30px;
}
.unstartBox .unstartConten .unstartDean{
    display: flex;
}
.unstartBox .unstartConten .deanAvatar {
    width: 65px;
}
.unstartBox .unstartConten .deanAvatar>img {
    width: 45px;
    border-radius: 50%;
}
.unstartBox .unstartConten .deanName {
    font-size: 16px;
    font-weight: bold;
}
.unstartBox .unstartConten .deanVideoBox {
    margin-top: 10px;
    display: flex;
}
.unstartBox .unstartConten .deanVideoBox .deanVideo {
    width: 45vw;
    height: 40px;
    display: flex;
    align-items: center;
    border-radius: 5px;
    box-shadow: 0px 0px 5px #eee;
}
.unstartBox .unstartConten .deanVideoBox .deanVideo>img {
    width: 15px;
    height: 15px;
    margin-left: 10px;
}
.unstartBox .unstartConten .deanVideoBox .red {
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: red;
    box-shadow: 0px 0px 1px #000;
}
.unstartBox .unstartConten .unstartMsg {
    display: flex;
    margin-top: 10px;
}
.unstartBox .unstartConten .vertical {
    width: 7px;
    background: #d62020;
    height: 25px;
}
.unstartBox .unstartConten .msgBox {
    width: 52vw;
    margin-left: 10px;
}
.unstartBox .unstartConten .msgBox>div:first-child {
    color: #d62020;
    font-size: 16px;
    font-weight: bold;
}
.unstartBox .unstartConten .msgBox>div:last-child {
    font-size: 14px;
    font-weight: bold;
    margin-top: 7px;
}
.noticeBox{
	position: fixed;
    background: rgba(0,0,0,.6);
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 99;
    display: none;
    justify-content: center;
    align-items: center;
}
</style>
<div class="unstartBox">
	<div class="unstartHeader">
		<div class="notice">
			<img src="{RES}img/notice.png">
			<span onclick="showNotice();">入学通知书</span>
		</div>
	</div>
	
	<div class="unstartConten">
		<div class="unstartDean">
			<div class="deanAvatar">
				<img alt="" src="{php echo toimage($cfg['deanAvatar'])}">
			</div>
			<div>
				<div class="deanName">{$cfg['deanName']}院长</div>
				<div class="deanVideoBox">
					<div class="deanVideo" id="switch-btn">
						<img alt="" src="{RES}img/video.png">
						<audio id="course_audio" src="{php echo tomedia($cfg['admission']['video'])}" preload="metadata"></audio>
					</div>
					<div style="margin-left: 20px;">
						<span class="red"></span>
						<span id="total-time">0″</span>
					</div>
				</div>
			</div>
		</div>
		
		<div class="unstartMsg">
			<div class="vertical"></div>
			<div class="msgBox">
				<div>别急，我们{$str}统一开始学习</div>
				<div>到时候公众号会提醒你</div>
			</div>
		</div>
	</div>
	
	{if $cfg['admission']['des']}
	<div style="margin-top: 20px;">
		<img style="width: 100%;" alt="" src="{php echo toimage($cfg['admission']['des'])}">	
	</div>
	{/if}
</div>

<div class="noticeBox">
	<div style="display: grid; text-align: center;">
		<div style="text-align: center;font-size: 14px;color: #fff;">长按保存图片，可分享给朋友</div>
		<img id="notice-res" src="" style="width: 70vw;margin: 15px;">
		<img src="{RES}img/close.png" style="margin: auto;width: 30px;" onclick="closeNotice();">
	</div>
</div>
<canvas id="myCanvas" width="640" height="1008" style="display: none;"></canvas>
{template 'loading'}
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
	audioAutoPlay('course_audio');
});
function audioAutoPlay(obj) {
	var audio = document.getElementById(obj);
	document.addEventListener("WeixinJSBridgeReady", function() {
		audio.play();
		audio.pause();
	}, false);
}

var audio = document.getElementById('course_audio');
$(audio).on('loadeddata',function(){
	$('#total-time').text(Math.floor(audio.duration)+"″");
	$('#switch-btn').click(function(){
		if (audio.paused) { 
            audio.play();
		}
	});
});

var nickname = '{$mem["nickname"]}';
var bookname = '{$book["title"]}';
var studentID = '学号：{$mbook["studentid"]}';
var word1 = '欢迎加入';
var word2 = '预祝你的学习之旅有所收获';
var deanName = '院长{$cfg["deanName"]}';
var ctime = '{php echo date("Y年m月d日",$mbook["createtime"])}';
createPoster();
function createPoster(){
	var avatar_pic = new Image();
	avatar_pic.src = '{$mem["avatar"]}';
	avatar_pic.onload = function(e) {
		var qr_pic = new Image();
		qr_pic.src = "{$qr}";
		qr_pic.onload = function(e) {
			var canvas = document.getElementById("myCanvas");
			var cxt = canvas.getContext("2d");
			var bg_pic = new Image();
			bg_pic.src = "{php echo toimage(RES.'img/noticebg.png')}";
			bg_pic.onload = function(e) {
				var cw = 640, ch = 1008, l=0,pw,ph;
				cxt.drawImage(bg_pic, 0, 0, cw, ch);
				//圆形切割-开始
			    cxt.save();
			    cxt.beginPath();
			    pw = ph = 94;
			    var pt = 366;
			    cxt.arc((cw-pw)/2+pw/2-1, pt, pw/2, 0, Math.PI * 2, false);
			    cxt.clip();
			    //圆形切割-结束
				cxt.drawImage(avatar_pic, (cw-pw)/2-1, pt-pw/2, pw, ph);
			    cxt.restore(); 
			    
				//头部书名
				l = getTextWidth(bookname,24);
				cxt.fillStyle = '#535353'; //设置描边样式
			    cxt.font = "24px Arial"; //设置字体大小和字体
			    cxt.fillText(bookname, (cw-l)/2, 220);
			    
				//昵称
				cxt.fillStyle = '#474747'; //设置描边样式
			    cxt.font = "24px Arial bold"; //设置字体大小和字体
			    l = getTextWidth(nickname,24);
			    cxt.fillText(nickname, (cw-l)/2, 465);
			    
				//学号
				cxt.fillStyle = '#454948'; //设置描边样式
			    cxt.font = "20px Arial"; //设置字体大小和字体
			    l = getTextWidth(studentID,20);
			    cxt.fillText(studentID, (cw-l)/2, 500);
			    
			  	//底部文字
				cxt.fillStyle = '#41423d'; //设置描边样式
			    cxt.font = "24px Arial"; //设置字体大小和字体
			    l = getTextWidth(word1,24);
			    cxt.fillText(word1, (cw-l)/2, 600);
			    
			  	//底部书名
				cxt.fillStyle = '#d26673'; //设置描边样式
			    cxt.font = "28px Arial bold"; //设置字体大小和字体
			    l = getTextWidth(bookname, 28);
			    cxt.fillText(bookname, (cw-l)/2, 640);
			    
				cxt.fillStyle = '#41423d'; //设置描边样式
			    cxt.font = "24px Arial"; //设置字体大小和字体
			    l = getTextWidth(word2,24);
			    cxt.fillText(word2, (cw-l)/2, 700);
			    
			    //二维码
			    cxt.drawImage(qr_pic, 80, 760, 150, 150);
			    
			    var r = 80;
			    l = getTextWidth(deanName, 22);
			    
				cxt.fillStyle = '#41423d'; //设置描边样式
			    cxt.font = "22px Arial"; //设置字体大小和字体
			    cxt.fillText(deanName, (cw-l)-r, 790);
			    
			    l = getTextWidth(ctime, 20);
				cxt.fillStyle = '#41423d'; //设置描边样式
			    cxt.font = "20px Arial"; //设置字体大小和字体
			    cxt.fillText(ctime, (cw-l)-r, 820);
			    
				var u = navigator.userAgent, app = navigator.appVersion;
		    	var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
		    	var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
		    	if(isIOS){
		    		var src = canvas.toDataURL().replace("data:image/png;base64,","");
		    	}
		    	isAndroid = true;
		    	if(isAndroid){
		    		var src = canvas.toDataURL("image/png");
		    	}
		    	$('#notice-res').attr('src', src);
		    	
		    	var n = getCookie('noticeBox');
		    	if(!n){
		    		setCookie('noticeBox', 1);
		    		showNotice();
		    	}
			}
		}
	}
}

function showNotice(){
	$('.noticeBox').css('display','flex');
}

function closeNotice(){
	$('.noticeBox').css('display','none');
}

function getTextWidth(str,size) {
    var width = 0;
    var html = document.createElement('span');
    html.innerText = str;
    html.style = 'font-size: '+size+'px;';
    html.className = 'getTextWidth';
    document.querySelector('body').appendChild(html);
    width = document.querySelector('.getTextWidth').offsetWidth;
    document.querySelector('.getTextWidth').remove();
    return width;
}

</script>
<script type="text/javascript">
setCookie('mem_book','{$id}');
</script>
{template 'footer'}